<template>
    <div style="padding: 8px 20px">
        <el-button v-hasPerm="['sys:dept:add']" :icon="CirclePlus" type="primary" @click="addDept(0)">新增部门</el-button>
    </div>
    <el-table :data="deptList" default-expand-all v-loading="loading" row-key="id" min-width="100%">
        <el-table-column fixed="left" label="部门名称" prop="name" align="center" width="160"></el-table-column>
        <el-table-column label="部门编码" prop="code" align="center" width="100"></el-table-column>
        <el-table-column label="部门级别" prop="level" align="center" width="100"></el-table-column>
        <el-table-column label="创建时间" prop="createTime" width="200"></el-table-column>
        <el-table-column label="备注" prop="remark" width="200"></el-table-column>
        <el-table-column fixed="right" align="right" label="操作" width="160">
            <template #default="scope">
                <el-button v-hasPerm="['sys:dept:add']" type="primary" link size="small"
                    @click.stop="addDept(scope.row.id)">
                    新增
                </el-button>
                <el-button v-hasPerm="['sys:dept:add']" type="warning" link size="small"
                    @click.stop="editDept(scope.row)">
                    编辑
                </el-button>
                <el-button v-hasPerm="['sys:dept:delete']" type="danger" link size="small"
                    @click.stop="delDept(scope.row.id)">
                    删除
                </el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-drawer v-model="dialog" title="新增菜单" :before-close="handleClose" direction="rtl" class="demo-drawer">
        <el-form ref="deptFormRef" :model="deptForm" :rules="rules" width="120px">
            <el-form-item label="上级部门" prop="parentId">
                <el-tree-select v-model="deptForm.parentId" placeholder="选择上级部门" :data="deptOptions" filterable
                    check-strictly :render-after-expand="false" />
            </el-form-item>
            <el-form-item label="部门名称">
                <el-input placeholder="部门名称" v-model="deptForm.name"></el-input>
            </el-form-item>
            <el-form-item label="部门编码">
                <el-input placeholder="GM|RD|TD..." v-model="deptForm.code"></el-input>
            </el-form-item>
            <el-form-item label="部门级别">
                <el-input placeholder="1|2|3" v-model="deptForm.level"></el-input>
            </el-form-item>
            <el-form-item>
                <el-input placeholder="备注" v-model="deptForm.remark"></el-input>
            </el-form-item>

            <el-button type="primary" round style="width: 100%" @click="submit">确定</el-button>

        </el-form>
    </el-drawer>
</template>

<script setup>
import { ElMessage, ElMessageBox } from 'element-plus';

import DeptApi from '@/api/dept';

let loading = ref(true)
let deptList = ref([])
let dialog = ref(false)

const initForm = {
    id: 0,
    name: "",
    code: "",
    parentId: 0,
    level: 1
}

let deptForm = ref(initForm)
let deptFormRef = ref()

const rules = reactive({
    name: [{ required: true, message: "请输入部门名称", trigger: "blur" }],
    code: [{ required: true, message: "请输入部门编码", trigger: "blur" }]
});

onMounted(() => {
    loadAllDept()
})

let deptOptions = ref([])
function loadAllDept() {
    loading.value = true
    DeptApi.listAll().then(list => {
        deptOptions.value = mapDeptList(list)
        deptList.value = list
        loading.value = false
    })
}

function handleClose() {
    dialog.value = false
    deptForm.value = initForm
}

function addDept(parentId) {
    dialog.value = true
    deptForm.value.parentId = parentId
}

function editDept(item) {
    dialog.value = true
    deptForm.value = item
}

function submit() {
    deptFormRef.value.validate((ok) => {
        if (ok) {
            DeptApi.addOrUpdate(deptForm.value).then(res => {
                if (res) {
                    dialog.value = false
                    ElMessage({
                        message: '添加或更新部门成功',
                        type: 'success',
                    })
                    loadAllDept()
                }
            }).catch(err => {
                ElMessage({
                    message: '添加或更新部门失败',
                    type: 'success',
                })
            })
        }
    })
}

function delDept(deptId) {
    ElMessageBox.confirm(
        '是否真的删除此部门?',
        '警告',
        {
            confirmButtonText: '删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(() => {
        DeptApi.delete(deptId).then(res => {
            if (res) {
                ElMessage({
                    type: 'success',
                    message: '删除成功！',
                })
                loadAllDept()
            }

        })
    }).catch(() => {
        ElMessage({
            type: 'info',
            message: 'Delete canceled',
        })
    })
}


function mapDeptList(list) {
    return list.map(i => {
        let item = { value: i.id, label: i.name }
        if (i.children && i.children.length > 0) {
            item.children = mapDeptList(i.children)
        }
        return item
    })
}

</script>